<template>
  <div class="login" @mousedown="handleMouseDown">
    <!-- 按钮 -->
    <div class="login-config">
      <div class="login-config-btn">
        <!-- 国际化 -->
        <el-dropdown trigger="click" @command="configLang">
          <el-button circle>
            <svg
              t="1742949599489"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4497"
              width="20"
              height="20"
            >
              <path
                d="M568.25 483.78125h-8.0625l30.9375 172.5c20.53125-7.40625 39.09375-18.1875 55.5-32.53125-16.78125-20.53125-30.65625-43.3125-41.15625-67.6875l32.625-4.21875c9 18.46875 19.3125 34.78125 30.9375 48.84375 24.09375-29.25 42.65625-68.25 55.59375-117l-156.375 0.09375z m123.1875 140.0625c18.5625 16.125 39.75 27.84375 63.5625 35.15625l14.90625 4.59375-8.71875 31.78125-14.90625-4.59375c-28.59375-8.71875-54.9375-23.71875-77.25-43.6875-20.90625 18.75-45.375 33.09375-72 42L617.9375 805.25H493.71875l-16.6875 75.9375h389.25c18.28125 0 33.09375-14.8125 33.09375-33.09375V285.125c0-18.28125-14.8125-33.09375-33.09375-33.09375H518.5625l25.875 144.28125-1.03125-0.375 3 15.84375 0.46875-2.0625 7.3125 41.0625h80.25v-33.09375h62.0625v33.09375h103.5V483.875h-43.125c-14.4375 58.125-36.1875 104.90625-65.4375 139.96875zM459.78125 805.0625H157.71875c-36.5625 0-66.1875-29.625-66.1875-66.1875V175.90625c0-36.5625 29.625-66.1875 66.1875-66.1875h331.125l20.8125 109.21875h356.53125c36.5625 0 66.1875 29.625 66.1875 66.1875v562.96875c0 36.5625-29.625 66.1875-66.1875 66.1875H435.78125l24-109.21875z m-156.46875-255v-34.78125h-65.4375v-51.28125h60.84375V429.5h-60.84375v-43.6875h65.4375v-34.5H199.8125v198.65625h103.5z m159.9375 0V450.96875c0-18-4.125-31.78125-12.375-41.4375-8.25-9.5625-20.4375-14.34375-36.375-14.34375-9.375 0-17.71875 1.875-25.03125 5.625-7.3125 3.75-13.3125 9.46875-17.25 16.6875h-2.0625l-5.0625-19.40625h-28.6875v151.96875h37.5v-71.53125c0-17.90625 2.34375-30.75 7.03125-38.53125 4.59375-7.78125 12.28125-11.625 22.78125-11.625 7.6875 0 13.3125 2.71875 16.78125 8.25 3.5625 5.53125 5.34375 13.6875 5.34375 24.65625v88.78125H463.25z"
                p-id="4498"
                fill="#515151"
              ></path>
            </svg>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in config.LANG" :key="item.value" :command="item">
                {{ item.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 换肤 -->
        <el-button circle @click="configDark">
          <el-icon v-if="dark"><Sunny /></el-icon>
          <el-icon v-else><Moon /></el-icon>
        </el-button>
        <!-- 关闭软件 -->
        <el-button
          style="margin-left: 0"
          icon="close"
          circle
          @click="handleCloseWindow"
        ></el-button>
      </div>
    </div>
    <!-- 左侧 -->
    <div class="login_adv">
      <div class="login_adv_title">
        <h2>{{ $t('login.name') }}</h2>
        <h4>{{ $t('login.slogan') }}</h4>
        <p>{{ $t('login.describe') }}</p>
      </div>
      <!-- 遮罩 -->
      <div class="login_adv_mask"></div>
      <div class="login_adv_image">
        <img src="../../assets/images/data.png" style="width: 100%" />
      </div>
      <div class="login_adv_bottom">© 小鹿线客线户管理系统 1.0.11</div>
    </div>
    <!-- 右侧 -->
    <div class="login-main">
      <div class="login-form">
        <div class="login-header">
          <div class="login-img">
            <img draggable="false" src="../../assets/images/logo.png" alt="" />
            <span class="title">小鹿线客户管理系统</span>
          </div>
        </div>
        <el-tabs>
          <el-tab-pane :label="$t('login.accountLogin')" lazy style="height: 300px">
            <password-form />
          </el-tab-pane>
          <el-tab-pane :label="$t('login.mobileLogin')" lazy style="height: 300px">
            <phone-form />
          </el-tab-pane>
        </el-tabs>
        <template v-if="true">
          <el-divider>{{ $t('login.signInOther') }}</el-divider>
          <div class="login-auth">
            <!-- 微信按钮 -->
            <el-button type="success" circle size="large">
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useWinMove from '@hooks/useWinMove'
import PasswordForm from './components/PasswordForm.vue'
import PhoneForm from './components/PhoneForm.vue'
import { reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const { handleMouseDown } = useWinMove()

// 关闭软件
const handleCloseWindow = (): void => {
  window.api.closeLogin()
}

// 换肤
const dark = ref<string | null>(localStorage.getItem('dark'))
const configDark = (): void => {
  const htmlEl = document.documentElement as HTMLElement
  if (htmlEl.classList.contains('dark')) {
    htmlEl.classList.remove('dark')
    dark.value = ''
  } else {
    htmlEl.classList.add('dark')
    dark.value = 'dark'
  }
  localStorage.setItem('dark', dark.value)
}

// 国际化
const config = reactive({
  LANG: [
    { name: '中文', value: 'zh-cn' },
    { name: '英文', value: 'en' }
  ]
})
const { locale } = useI18n()
const configLang = (item: { name: string; value: string }): void => {
  locale.value = item.value
  localStorage.setItem('lang', item.value)
}
</script>

<style lang="less" scoped>
img {
  user-select: none;
  pointer-events: none;
}

.login {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
  background: #fff;

  .login-config {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;

    .login-config-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 120px;
      margin: 10px 10px 0 0;
    }
  }

  // 左侧
  .login_adv {
    position: relative;
    width: 40%;
    background: url('../../assets/images/auth_banner.png');

    .login_adv_title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 40px;
      color: #fff;

      h2 {
        font-size: 40px;
      }

      h4 {
        margin: 20px 0;
        font-size: 18px;
      }

      p {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
      }
    }

    // 遮罩
    .login_adv_mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .login_adv_image {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 80px;
      padding: 20px;
      z-index: 3;
    }

    .login_adv_bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 30px;
      margin-left: 30px;
      color: #fff;
    }
  }

  // 右侧
  .login-main {
    flex: 1;
    display: flex;

    .login-form {
      margin: auto;
      padding-top: 80px;
      width: 400px;

      .login-header {
        margin-bottom: 40px;

        .login-img {
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            margin-right: 10px;
            width: 40px;
            height: 40px;
          }

          .title {
            font-size: 26px;
            font-weight: bold;
          }
        }
      }

      // 微信按钮
      .login-auth {
        display: flex;
        justify-content: space-around;
      }
    }
  }
}
</style>
